<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="68px">
            <el-form-item label="产品编码" prop="productCode">
                <el-input v-model="queryParams.productCode" placeholder="请输入产品编码" clearable
                    @keyup.enter.native="getList" />
            </el-form-item>
            <el-form-item label="开始时间" prop="startTime">
                <el-date-picker v-model="queryParams.startTime" type="date" value-format="yyyy-MM-dd"
                    placeholder="请输入开始时间" @keyup.enter.native="getList">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="endTime">
                <!-- <el-input v-model="queryParams.endTime" placeholder="请输入结束时间" clearable
                    @keyup.enter.native="handleQuery" /> -->
                <el-date-picker v-model="queryParams.endTime" type="date" value-format="yyyy-MM-dd" placeholder="请输入结束时间" @keyup.enter.native="getList">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
                <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
            </el-form-item>
        </el-form>

        <el-table :data="tableData" style="width: 100%" border v-loading="tableLoading" element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading">

            <el-table-column type="index" label="序号" align="center" width="50">
            </el-table-column>
            <el-table-column prop="productCode" label="产品编码" align="center" />
            <el-table-column prop="startInMoney" label="调价前进价" align="center" />
            <el-table-column prop="endInMoney" label="调价后进价" align="center" />
            <el-table-column prop="startTime" label="调价开始时间" align="center" />
            <el-table-column prop="endTime" label="调价结束时间" align="center" />
            <el-table-column prop="status" label="0无效数据 1当前数据" align="center">
                <template slot-scope="scope">
                    <span :style="{ color: scope.row.status == 0 ? '#67C23A' : '' }">{{ scope.row.status == 0 ? "无效数据" :
            "有效数据" }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="startOutMoney" label="调价前售价" align="center" />
            <el-table-column prop="endOutMoney" label="调价后售价" align="center" />
        </el-table>
    </div>
</template>

<script>
import { listMoney } from "@/api/system/money.js"

export default {
    name: "Money",
    data() {
        return {
            // 显示搜索条件
            showSearch: true,
            queryParams: {
                startTime: null,
                endTime: null,
                productCode: null
            },

            tableData: [],
            tableLoading: false
        }
    },

    methods: {
        getList() {
            this.tableLoading = true;
            listMoney(this.queryParams).then(res => {
                if (res.code == 200) {
                    this.tableData = res.rows;
                } else {
                    this.$message.error(res.msg);
                }
            }).finally(() => {
                this.tableLoading = false;
            })
        }
    },

    created() {
        this.getList();
    }
}
</script>

<style scoped lang="scss"></style>